<template>
  <div class="pay-follow-container">
    <m-header title="跟单">
      <img class="header-right" slot="right" src="../../../assets/imgs/live/schedule@2x.png" alt>
    </m-header>
    <div class="content">
      <div class="plan">
        计划购买<x-number :min="0"></x-number>元
      </div>
      <tab class="custom-tabnav" custom-bar-width="1.5rem">
        <tab-item v-for="(item, index) in tabList" :key="index"
          :selected="tabIndex===index" @on-item-click="handleTabClick">{{item}}</tab-item>
      </tab>
      <div class="tab-content">
        <x-table :cell-bordered="true" style="background-color:#fff;">
        <thead>
          <tr style="background: #f3f3f3">
            <th>过关</th>
            <th>单注组合</th>
            <th>注数</th>
            <th>预测奖金</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2串1<br />2串1</td>
            <td>尤文图斯 主负(2.68)<br />尤文图斯 主负(2.68)</td>
            <td>1</td>
            <td>123.00</td>
          </tr>
        </tbody>
      </x-table>
      </div>
    </div>
    <div class="bottom-wrapper">
      <div class="beishu">投<x-number :min="0"></x-number>倍</div>
      <div class="footer">
        <div class="clear-btn"></div>
        <div class="select-tip">
          <div>
            <div class="top">共1注50.00元</div>
            <div class="bottom">预计奖金<span class="red-text">120~150元</span></div>
          </div>
        </div>
        <div class="go-buy">付款</div>
      </div>
    </div>
  </div>
</template>
<script>
import { XNumber, XTable } from 'vux';
export default {
  components: {
    XNumber, XTable
  },
  data () {
    return {
      tabIndex: 0,
      tabList: ['评价优化', '薄热优化', '薄冷优化']
    };
  },
  methods: {
    handleTabClick (index) {
      this.tabIndex = index;
    }
  }
};
</script>
<style lang="less">
.pay-follow-container {
  padding-top: 0.92rem;
  padding-bottom: 0.2rem;
  // background: #ffffff;
  height: 100%;
  .header-right {
    height: 0.4rem;
  }
  .header {
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    color: #333333;
    font-size: 0.28rem;
    img {
      width: 0.8rem;
      margin-right: 0.2rem;
    }
  }
  .content {
    background: #ffffff;
    .plan {
      display: flex;
          justify-content: center;
          align-items: center;
    }
    .tab-content {
      padding: 0.2rem;
    }
  }
  .bottom-wrapper {
    position: fixed;
    height: 1.97rem;
    bottom: 0;
    background: #ffffff;
    .beishu {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .footer {
        position: fixed;
        bottom: 0;
        height: 0.97rem;
        width: 100%;
        display: flex;

        border-top: 1px solid #eeeeee;
        .clear-btn {
          border-right: 1px solid #eeeeee;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 1.4rem;
          color: #202020;
          font-size: 0.26rem;
          height: 0.97rem;
          justify-content: center;
          align-items: center;
        }
        .select-tip {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 3.5rem;
          color: #202020;
          font-size: 0.22rem;
          height: 0.97rem;
          .top {
            color: #d44743;
            margin-bottom: 0.08rem;
            text-align: center;
          }
          .bottom {
            text-align: center;
            .red-text {
              color: #d44743;
            }
          }
        }
        .go-buy {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 2.6rem;
          background: #d44743;
          color: #ffffff;
          font-size: 0.34rem;
          height: 0.97rem;
        }
      }
  }
}
</style>
